<template>
  <div>
    <div class="article-list-wrap">
        <div class="article-list-item" v-for="item in ListData" :key="item.id">
        <div class="article-title">
          <h2>
            <a href="javascript:;" class="title-text" @click="titleClick(inSpace?item.articleId:item.id,item.authorId)">{{item.title}}</a>
          </h2>
        </div>
        <el-row type="flex" justify="space-between">
          <el-col :span="6">
            <div v-if="!inSpace" class="user-info">
              <div class="user-img">
                <el-avatar size="large" :src="item.userImg"></el-avatar>
              </div>
              <div class="user-nick-name">{{item.userNickName}}</div>
              <div class="article-create-date">{{item.publishedDate}}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="artocle-meta">
              <div class="good-count">
                <i class="fa fa-thumbs-o-up"></i>
                <span style="padding: 0 5px;">{{item.goodCount}}</span>
              </div>
              <div class="browse-count">
                <span>
                  <i class="el-icon-view"></i>
                  {{item.browseCount}}
                </span>
              </div>
              <div class="comment-count">
                <span>
                  <i class="el-icon-chat-dot-square"></i>
                  {{item.commentCount}}
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "articleList",
  props: {
    ListData: Array,
    inSpace:{
      type: Boolean,
      default: ()=> false
    }
  },
  methods: {
    titleClick(myArticleId,myAuthorId){
      //  console.log('articleList组件:'+myArticleId+"author:"+myAuthorId);
      this.$router.push({
        name:"ArticleDetail",
        query:{
          articleId:myArticleId,
          authorId:myAuthorId
        }
      });
    }
  }
};
</script>

<style>
/* 容器部分 */
.article-list-wrap {
  padding: 20px;
}
.article-list-item {
}
/* 用户信息部分 */
.user-info {
  display: flex;
  align-items: center;
  padding-top: 10px;
  font-size: 14px;
}
.user-img {
  padding: 0 5px;
}
.user-nick-name {
}
.article-create-date {
  color: #666;
  font-size: 14px;
  padding: 0 5px;
}
/* 文章额外信息部分 */
.artocle-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding: 10px 0;
  font-size: 14px;
}
.good-count,
.browse-count,
.comment-count {
  flex: 6;
  text-align: right;
  display: flex;
  align-items: center;
}
/* 文章标题 */
.article-title {
  margin-bottom: 10px;
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.article-title h2 {
  font-size: 16px;
  font-weight: bold;
  font-family: 'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;
}
.title-text {
  font-size: 20px;
  text-decoration: none;
  color: black;
  transition: all 0.3s;
}
.title-text:hover {
  color: skyblue;
}
/* 文章部分内容 */
.article-subcontent {
  color: #666;
  font-size: 16px;
}
</style>